<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_姓名案例_计算属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    姓:<input type="text" v-model="firstname"><br>
    名:<input type="text" v-model="lastname"><br>
<!--    计算属性和 普通属性是一样的用法 只不过不会存在在 vm._data中 -->
<!--      get 方法只被调用了一次 -->
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span>
  </div>
  <script>
    Vue.config.devtools = true;
    Vue.config.productionTip = false;
    const vm = new Vue({
      el:'#root',
      data:{
        firstname:'张',
        lastname:'三'
      },
      //计算属性的定义
      computed:{
          //以一个对象的形式来计算
          fullName:{
              //相当于Object.defineProperty中的get方法 当有人要读取数据时调用这个方法
              //get方法 只会调用一次 剩下的在缓存中读取 get方法调用的时机：1、初次执行 2、计算属性所依赖的属性被修改时
              get(){
                  console.log('get 被调用~~~~')
                //其中的this指向的是vm实例
                return this.firstname + '-' + this.lastname;
              },
              //如果要修改计算属性 则需要set方法
              set (value) {
                  let valArr = value.split('-');
                  this.firstname = valArr[0];
                  this.lastname = valArr[1];
              }
          }
      }
    });
  </script>
</body>
</html>